<template>
    <div class="first_echarts" id="register"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const xAxis = ref<any>([])
const seriesData = ref<any>([])
const props = defineProps({
    userMonthlyCount: Array,
})
onMounted(async () => {
    // followCountInfo关注人数
    // salesInfo销售额
    console.log('注册人数线图数据',props.userMonthlyCount);
    
    var chartDom = document.getElementById('register')
    for (let i = 0; i < props.userMonthlyCount.length; i++) {
        xAxis.value[i] = props.userMonthlyCount[i].month
        seriesData.value[i] = props.userMonthlyCount[i].count
    }
    console.log('注册注册注册注册注册注册注册注册注册注册', xAxis.value)
    console.log('注册注册注册注册注册注册注册注册注册注册', seriesData.value)
    xAxis.value=xAxis.value
    seriesData.value=seriesData.value
    console.log('数据数据',xAxis.value);
    
    var myChart = echarts.init(chartDom)
    var option
    option = {
        color: ['#80FFA5'],

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#369BFF',
                },
            },
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '4%',
            top: '6%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: xAxis.value,
            },
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '注册人数',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 1,
                    color: '#369BFF',
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(133, 197, 250, 0.2)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(133, 244, 250,0)',
                        },
                    ]),
                },
                emphasis: {
                    focus: 'series',
                },
                data: seriesData.value,
            },
        ],
    }

    option && myChart.setOption(option)
})
</script>

<style scoped></style>
